<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Magnetic Cursor Example</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  .magnetic-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: black;
  }

  .magnetic-area {
    position: absolute;
    top: calc(50% - 50px);
    left: 0;
    width: 100%;
    height: 100px;
    pointer-events: none;
  }
</style>
</head>
<body>
<div class="magnetic-line"></div>
<div class="magnetic-area"></div>

<script>
document.addEventListener('mousemove', function(e) {
  const lineY = window.innerHeight / 2;
  const distance = Math.abs(e.clientY - lineY);

  if (distance <= 50) { // Magnetic effect threshold
    document.body.style.cursor = 'none'; // Hide the cursor
    document.querySelector('.magnetic-line').style.backgroundColor = 'red';
  } else {
    document.body.style.cursor = 'auto';
    document.querySelector('.magnetic-line').style.backgroundColor = 'black';
  }
});
</script>
</body>
</html>
